<template>
  <view class="parking-time-stats-container">
    <z-paging 
      ref="paging" 
      v-model="dataList" 
      @query="queryList"
      :auto="false"
      :refresher-enabled="true"
      :loading-more-enabled="true"
      :empty-view-text="'暂无数据'"
      class="list-paging"
    >
      <template #top>
        <!-- 页面标题 -->
        <view class="page-header">
          <view class="header-title">停车时长统计</view>
        </view>

        <!-- 筛选区域 -->
        <view class="filter-section">
          <view class="filter-row">
            <view class="filter-item">
              <text class="filter-label">开始日期：</text>
              <picker mode="date" :value="filters.startDate" @change="onStartDateChange">
                <view class="date-picker">
                  <text>{{ filters.startDate || '请选择' }}</text>
                  <up-icon name="arrow-down" size="14"></up-icon>
                </view>
              </picker>
            </view>
            <view class="filter-item">
              <text class="filter-label">结束日期：</text>
              <picker mode="date" :value="filters.endDate" @change="onEndDateChange">
                <view class="date-picker">
                  <text>{{ filters.endDate || '请选择' }}</text>
                  <up-icon name="arrow-down" size="14"></up-icon>
                </view>
              </picker>
            </view>
          </view>
          
          <view class="filter-row">
            <view class="filter-item full-width">
              <text class="filter-label">停车场：</text>
              <picker :value="filters.parkingLotIndex" :range="parkingLots" @change="onParkingLotChange">
                <view class="picker-input">
                  <text>{{ parkingLots[filters.parkingLotIndex] || '请选择停车场' }}</text>
                  <up-icon name="arrow-down" size="14"></up-icon>
                </view>
              </picker>
            </view>
          </view>

          <view class="filter-actions">
            <button class="search-btn" @click="searchData">查询</button>
            <button class="reset-btn" @click="resetFilters">重置</button>
          </view>
        </view>

        <!-- 列表表头 -->
        <view class="list-header">
          <text class="list-cell">停车场</text>
          <text class="list-cell">日期</text>
          <text class="list-cell">日间停车数量</text>
          <text class="list-cell">日间停车时长</text>
          <text class="list-cell">夜间停车数量</text>
          <text class="list-cell">夜间停车时长</text>
        </view>
      </template>

      <!-- 列表内容 -->
      <view v-for="(item, index) in dataList" :key="index" class="list-row" @click="showDetail(item)">
        <text class="list-cell">{{ item.parkingLot }}</text>
        <text class="list-cell">{{ item.date }}</text>
        <text class="list-cell">{{ item.dayParkingCount }}</text>
        <text class="list-cell">{{ item.dayParkingDuration }}</text>
        <text class="list-cell">{{ item.nightParkingCount }}</text>
        <text class="list-cell">{{ item.nightParkingDuration }}</text>
      </view>
    </z-paging>

    <!-- 详情弹窗 -->
    <up-popup v-model:show="showDetailModal" mode="bottom" :round="20" closeable>
      <view class="detail-modal">
        <view class="modal-header">
          <text class="modal-title">停车时长详情</text>
        </view>
        <view class="modal-content">
          <view class="detail-item">
            <text class="detail-label">停车场：</text>
            <text class="detail-value">{{ currentDetail.parkingLot }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">日期：</text>
            <text class="detail-value">{{ currentDetail.date }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">日间停车数量：</text>
            <text class="detail-value">{{ currentDetail.dayParkingCount }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">日间停车时长：</text>
            <text class="detail-value">{{ currentDetail.dayParkingDuration }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">夜间停车数量：</text>
            <text class="detail-value">{{ currentDetail.nightParkingCount }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">夜间停车时长：</text>
            <text class="detail-value">{{ currentDetail.nightParkingDuration }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">总停车数量：</text>
            <text class="detail-value">{{ currentDetail.totalParkingCount }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">总停车时长：</text>
            <text class="detail-value">{{ currentDetail.totalParkingDuration }}</text>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'

// 筛选条件
const filters = reactive({
  startDate: '',
  endDate: '',
  parkingLotIndex: 0
})

// 停车场选项
const parkingLots = ref(['全部', '停车场A', '停车场B', '停车场C', '停车场D'])

// 列表数据
const dataList = ref([])
const paging = ref(null)

// 详情弹窗
const showDetailModal = ref(false)
const currentDetail = ref({})

// 日期选择
const onStartDateChange = (e) => {
  filters.startDate = e.detail.value
}

const onEndDateChange = (e) => {
  filters.endDate = e.detail.value
}

const onParkingLotChange = (e) => {
  filters.parkingLotIndex = e.detail.value
}

// 查询数据
const searchData = () => {
  if (paging.value) {
    paging.value.reload()
  }
}

// 重置筛选
const resetFilters = () => {
  filters.startDate = ''
  filters.endDate = ''
  filters.parkingLotIndex = 0
  if (paging.value) {
    paging.value.reload()
  }
}

// 分页查询
const queryList = (pageNo, pageSize) => {
    // 模拟API调用
    setTimeout(() => {
      const mockData = generateMockData(pageNo, pageSize)
      paging.value.complete(mockData)
    }, 500)
}

// 生成模拟数据
const generateMockData = (pageNo, pageSize) => {
  const data = []
  const parkingLots = ['停车场A', '停车场B', '停车场C', '停车场D']
  
  for (let i = 0; i < pageSize; i++) {
    const index = (pageNo - 1) * pageSize + i
    if (index >= 100) break // 模拟总数限制
    
    // 生成日期（最近30天内的随机日期）
    const date = new Date()
    date.setDate(date.getDate() - Math.floor(Math.random() * 30))
    const formattedDate = formatDate(date)
    
    // 生成随机数据
    const dayParkingCount = Math.floor(Math.random() * 100) + 50
    const dayParkingHours = Math.floor(Math.random() * 200) + 100
    const dayParkingMinutes = Math.floor(Math.random() * 60)
    const dayParkingDuration = `${dayParkingHours}小时${dayParkingMinutes}分钟`
    
    const nightParkingCount = Math.floor(Math.random() * 50) + 20
    const nightParkingHours = Math.floor(Math.random() * 150) + 50
    const nightParkingMinutes = Math.floor(Math.random() * 60)
    const nightParkingDuration = `${nightParkingHours}小时${nightParkingMinutes}分钟`
    
    const totalParkingCount = dayParkingCount + nightParkingCount
    const totalParkingHours = dayParkingHours + nightParkingHours
    const totalParkingMinutes = (dayParkingMinutes + nightParkingMinutes) % 60
    const totalParkingHoursAdjusted = totalParkingHours + Math.floor((dayParkingMinutes + nightParkingMinutes) / 60)
    const totalParkingDuration = `${totalParkingHoursAdjusted}小时${totalParkingMinutes}分钟`
    
    data.push({
      id: index + 1,
      parkingLot: parkingLots[index % parkingLots.length],
      date: formattedDate,
      dayParkingCount: dayParkingCount,
      dayParkingDuration: dayParkingDuration,
      nightParkingCount: nightParkingCount,
      nightParkingDuration: nightParkingDuration,
      totalParkingCount: totalParkingCount,
      totalParkingDuration: totalParkingDuration
    })
  }
  
  return data
}

// 格式化日期
const formatDate = (date) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 显示详情
const showDetail = (item) => {
  currentDetail.value = item
  showDetailModal.value = true
}

// 页面加载
onMounted(() => {
  // 设置默认日期范围（最近7天）
  const endDate = new Date()
  const startDate = new Date(endDate.getTime() - 6 * 24 * 60 * 60 * 1000)
  
  filters.endDate = formatDate(endDate)
  filters.startDate = formatDate(startDate)
  
  // 页面挂载时获取数据
  nextTick(() => {
    if (paging.value) {
      paging.value.reload()
    }
  })
})
</script>

<style lang="scss" scoped>
.parking-time-stats-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx 30rpx 30rpx;
  color: white;
  
  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
  }
}

.filter-section {
  background: white;
  margin: 20rpx;
  padding: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  
  .filter-row {
    display: flex;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .filter-item {
    flex: 1;
    margin-right: 20rpx;
    
    &:last-child {
      margin-right: 0;
    }
    
    &.full-width {
      flex: none;
      width: 100%;
      margin-right: 0;
    }
  }
  
  .filter-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 10rpx;
    display: block;
  }
  
  .date-picker,
  .picker-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    border: 2rpx solid #e0e0e0;
    border-radius: 10rpx;
    background: #fafafa;
    font-size: 26rpx;
    color: #666;
  }
  
  .filter-actions {
    display: flex;
    gap: 20rpx;
    margin-top: 30rpx;
  }
  
  .search-btn,
  .reset-btn {
    flex: 1;
    padding: 20rpx;
    border-radius: 10rpx;
    font-size: 28rpx;
    border: none;
  }
  
  .search-btn {
    background: #1890FF;
    color: white;
  }
  
  .reset-btn {
    background: #f0f0f0;
    color: #666;
  }
}

.list-header {
  display: flex;
  background: #f8f9fa;
  padding: 20rpx;
  border-bottom: 2rpx solid #eee;
  margin: 0 20rpx;
  border-radius: 20rpx 20rpx 0 0;
  
  .list-cell {
    flex: 1;
    text-align: center;
    font-weight: bold;
    color: #333;
    font-size: 28rpx;
  }
}

.list-paging {
  min-height: 400rpx;
}

.list-row {
  display: flex;
  padding: 30rpx 20rpx;
  border-bottom: 2rpx solid #f0f0f0;
  margin: 0 20rpx;
  background: white;
  
  &:last-child {
    border-bottom: none;
    border-radius: 0 0 20rpx 20rpx;
  }
  
  .list-cell {
    flex: 1;
    text-align: center;
    font-size: 26rpx;
    color: #666;
  }
}

.detail-modal {
  padding: 40rpx;
  
  .modal-header {
    text-align: center;
    margin-bottom: 30rpx;
    
    .modal-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .modal-content {
    .detail-item {
      display: flex;
      margin-bottom: 20rpx;
      align-items: center;
      
      .detail-label {
        width: 180rpx;
        font-size: 28rpx;
        color: #666;
      }
      
      .detail-value {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }
    }
  }
}
</style>